<template>
    <div class="content">
        <div class="query" v-if="showQuery">
            <el-form :inline="true" :model="form" label-width="auto">
                <el-form-item label="事务名称：">
                    <el-select v-model="form.definitionId" clearable filterable remote reserve-keyword
                        placeholder="请输入事务名称查询" no-data-text="暂无数据" :remote-method="queryDefinitionNms"
                        style="width: 200px">
                        <el-option v-for="item in definitionNmsOptions" :key="item.id" :label="item.definitionNm"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="发起人：">
                    <el-select v-model="form.initiatorId" clearable filterable remote reserve-keyword
                        placeholder="请输入发起人查询" no-data-text="暂无数据" :remote-method="queryInitiators"
                        style="width: 200px">
                        <el-option v-for="item in initiatorsOptions" :key="item.userId" :label="item.username"
                            :value="item.userId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="状态：">
                    <el-select clearable v-model="status" placeholder="请选择状态查询" @clear="clearStatus"
                        style="width: 200px">
                        <el-option label="同意" value="1" />
                        <el-option label="拒绝" value="2" />
                        <el-option label="退回" value="3" />
                    </el-select>
                </el-form-item>
                <el-form-item label-width="200">
                    <el-button type="primary" @click="getData" :icon="Search">查询</el-button>
                    <el-button @click="reset" :icon="Refresh">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="fun">
            <div class="left" style="font-size: 12px; color: #409EFF;">
                注：点击事务名称可查看详情
            </div>
            <div class="right">
                <el-tooltip :content="showQuery ? '隐藏搜索栏' : '展示搜索栏'" placement="top">
                    <el-button :icon="TurnOff" circle @click="showQuery = false" v-if="showQuery" />
                    <el-button :icon="Open" circle @click="showQuery = true" v-else />
                </el-tooltip>
                <el-tooltip content="刷新" placement="top">
                    <el-button :icon="Refresh" circle @click="getData()" />
                </el-tooltip>
            </div>
        </div>
        <div class="table">
            <el-table empty-text="暂无数据" :show-overflow-tooltip="true" :data="tableData" v-loading="loading"
                element-loading-text="数据加载中..."
                :header-cell-style="{ background: 'var(--table-title-color)', color: 'var(--table-title-font-color)' }"
                border>
                <el-table-column prop="definitionNm" label="事务名称">
                    <template #default="scope">
                        <router-link :to="{
                            path: '/workflow/workflowDetail',
                            query: { taskId: scope.row.id, instanceId: scope.row.instanceId, definitionNm: scope.row.definitionNm }
                        }" style="text-decoration: none;">
                            <el-text style="cursor: pointer;" type="primary">{{
                                scope.row.definitionNm }}</el-text>
                        </router-link>
                    </template>
                </el-table-column>
                <el-table-column prop="initiator" label="发起人" />
                <el-table-column prop="startTime" label="发起时间" />
                <el-table-column prop="operationTime" label="处理时间" />
                <el-table-column prop="retentionTime" label="处理时长" />
                <el-table-column prop="status" label="状态">
                    <template #default="scope">
                        <span v-if="scope.row.status === '0'">
                            <el-tag type="primary">等待处理</el-tag>
                        </span>
                        <span v-if="scope.row.status === '1'">
                            <el-tag type="success">已同意</el-tag>
                        </span>
                        <span v-if="scope.row.status === '2'">
                            <el-tag type="danger">已拒绝</el-tag>
                        </span>
                        <span v-if="scope.row.status === '3'">
                            <el-tag type="warning">已退回</el-tag>
                        </span>
                        <span v-if="scope.row.status === '4'">
                            <el-tag type="info">发起人已撤销</el-tag>
                        </span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-config-provider>
            <el-pagination v-model:current-page="page.currentPage" v-model:page-size="page.pageSize"
                :page-sizes="[10, 20, 30, 40]" :pager-count="$isMobile() ? 5 : 7"
                :layout="$isMobile() ? 'prev,pager,next' : 'total, sizes, prev, pager, next, jumper'"
                :background="!$isMobile()" :total="page.total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </el-config-provider>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { Search, TurnOff, Open, Refresh } from '@element-plus/icons-vue'
import api from "@/api"
import { ElMessage } from 'element-plus'

const showQuery = ref(true)
const loading = ref(false)
const form = ref({ status: '0!' })
const page = ref({ pageSize: 10, pageNum: 1, currentPage: 0, total: 0 })
const tableData = ref([])
const status = ref()
const definitionNmsOptions = ref([])
const initiatorsOptions = ref([])

//获取数据
const getData = async () => {
    loading.value = true
    if (status.value) {
        form.value.status = status.value
    }
    let params = { pageNum: page.value.pageNum, pageSize: page.value.pageSize, ...form.value }
    const res = await api.get('/workflow/taskInstance/pageList', params)
    if (res.data.code === 200) {
        tableData.value = res.data.data.records
        page.value.currentPage = res.data.data.current
        page.value.total = res.data.data.total
        loading.value = false
    } else {
        ElMessage.error(res.data.msg)
    }
}
//切换页
const handleSizeChange = (val) => {
    page.value.pageSize = val
    getData()
}
const handleCurrentChange = (val) => {
    page.value.pageNum = val
    getData()
}
//重置查询条件
const reset = () => {
    status.value = null
    form.value = { status: '0!' }
    getData()
}
const queryDefinitionNms = async (query) => {
    if (query) {
        const res = await api.get('/workflow/definition/pageList', { definitionNm: query })
        if (res.data.code === 200) {
            definitionNmsOptions.value = res.data.data.records
        } else {
            ElMessage.error(res.data.msg)
        }
    }
}
const queryInitiators = async (query) => {
    if (query) {
        const res = await api.get('/author/user/pageList', { username: query })
        if (res.data.code === 200) {
            initiatorsOptions.value = res.data.data.records
        } else {
            ElMessage.error(res.data.msg)
        }
    }
}
const clearStatus = () => {
    form.value = { status: '0!' }
}
onMounted(() => {
    getData()
})
</script>
<style scoped lang="less"></style>